<style scoped lang="scss">
.header {
  position: absolute;
  left: 240px;
  top: 0;
  right: 0;
  height: 70px;
  background-color: white;
  transition: all 300ms ease-in-out;
}

.mini {
  left: 64px;
}
</style>
<template>
  <div class="header flex" :class="{ mini: menuCollapse }">
    <div class="flex0 flex aic">
      <span
        class="fs30 pointer"
        :class="[menuCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"
        @click="doCollapse"
      ></span>
    </div>
    <div class="flex1"></div>
    <div class="flex0 flex aic pr15">
      <img
        :src="loginInfo.ava"
        style="width: 50px; height: 50px; border-radius: 50%"
      />
      <span class="fs14 ml10 pointer">{{ loginInfo.name }}</span>
      <el-link type="primary" class="ml10">设置</el-link>
      <el-link type="primary" class="ml10">退出</el-link>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { mutationsTypes, actionsTypes, stateTypes } from "../../store/admin";

export default {
  name: "AdminHeader",
  computed: {
    ...mapState("admin", [stateTypes.menuCollapse, stateTypes.loginInfo])
  },
  mounted() {
    const token = this.$cookies.get("adminToken");
    this[mutationsTypes.setToken](token);
    this[actionsTypes.getLoginInfo](token).catch(() => {
      this.$router.push({
        path: "/admin/login",
        query: { callback: this.$route.fullPath }
      });
    });
  },
  methods: {
    ...mapActions("admin", [actionsTypes.getLoginInfo]),
    ...mapMutations({
      setMenuCollapse: "admin/setMenuCollapse"
    }),
    ...mapMutations("admin", [mutationsTypes.setToken]),
    doCollapse() {
      this.setMenuCollapse(!this.menuCollapse);
    }
  }
};
</script>
